<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="../../component/pear/css/pear.css" />
  <link rel="stylesheet" href="../../admin/css/other/result.css" />
  <style>
    .show {
      /* font-size: 20px; */
      padding-left: 20px;
      padding-right: 20px;
    }

    .show .datas {
      float: right;
    }

    .show .datas .num {
      padding-right: 10px;
      color: #36B368;
    }
  </style>
</head>

<body class="pear-container">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          基本信息
        </div>
        <div class="layui-card-body">
          <p class="show"><span>数据总量：</span> <span id="total" class="datas"><span class="num">20000</span>条</span></p>
        </div>
        <div class="layui-card-body">
          <p class="show"><span>收录车型：</span> <span id="carsnum" class="datas"><span class="num">8</span>种</span></p>
        </div>
        <div class="layui-card-body">
          <p class="show"><span>关键词数：</span> <span id="keywords" class="datas"><span class="num">400</span>个</span>
          </p>
        </div>
        <div class="layui-card-body">
          <p class="show"><span>主题数：</span> <span id="themes" class="datas"><span class="num">7</span>类</span>
          </p>
        </div>
        <div class="layui-card-body">
          <p class="show"><span>预测率：</span> <span id="predicts" class="datas"><span class="num">100%</span></span></p>
        </div>
        <div class="layui-card-body">
          <p class="show"><span>总体满意率：</span> <span id="suc" class="datas"><span class="num">70%</span></span></p>
        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-body">
          <div id="line2" style="min-height: 250px"></div>
        </div>
      </div>
    </div>
    <div class="layui-col-md9">
      <div class="layui-card">
        <div class="layui-card-body">
          <div id="line1" style="min-height: 570px"></div>
        </div>
      </div>
    </div>
  </div>

  <script src="../../component/layui/layui.js"></script>
  <script src="../../component/pear/pear.js"></script>
  <script>
    const host = "http://localhost/LSTM_car_comment/public/";
    layui.use(['echarts'], function () {
      var $ = layui.jquery;
      let echarts = layui.echarts;
      var line1 = echarts.init(document.getElementById('line1'));
      var line2 = echarts.init(document.getElementById('line2'));
      const colorList = ['#20bf6b', '#82ccdd',];
      option = {
        title: {
          text: '车型数量统计',
          subtext: '全部数据'
        },
        color: colorList,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          name: '数量',
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['奥迪A3', '奥迪A4', '奥迪A4L', '奥迪A6L', '奥迪A7', '奥迪Q3', '奥迪Q5', '奥迪Q7']
        },
        series: [
          {
            name: '2011年',
            type: 'bar',
            barWidth: 30,
            colorList: ['#36B368'],
            data: [2019, 1394, 174, 3844, 1024, 1227, 483, 1524]
          }
        ]
      };
      option1 = {
        title: {
          text: "汽车好评率对比",
          left: 'center'
        },
        color: ['#82ccdd', '#1B9CFC', '#55E6C1', '#686de0', '#9980FA', '#78e08f', '#b8e994', '#3c6382'],
        // legend: {
        //   top: 'bottom'
        // },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: [15, 75],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 48, name: '奥迪A4L' },
              { value: 40, name: '奥迪A3' },
              { value: 57, name: '奥迪A4' },
              { value: 54, name: '奥迪A6L' },
              { value: 34, name: '奥迪A7' },
              { value: 35, name: '奥迪Q3' },
              { value: 53, name: '奥迪Q5' },
              { value: 47, name: '奥迪Q7' }
            ]
          }
        ]
      };
      line1.setOption(option);
      line2.setOption(option1);
      window.onresize = function () {
        line1.resize();
      };

      $.get(host + 'web/ksh/datacount', function (data) {
        $("#total .num").html(data);
      });
      $.get(host + 'web/ksh/keywordscount', function (data) {
        $("#keywords .num").html(data[0].c);
      });
      $.get(host + 'web/ksh/predicts', function (data) {
        $("#predicts .num").html(data);
      });
      $.get(host + 'web/ksh/manyi', function (data) {
        $("#suc .num").html(data);
      });
    })

  </script>
</body>

</html>